import React, {PureComponent} from "react";
import {connect} from "react-redux";
import {Button, Divider, Icon, Modal, notification, Popconfirm, Table} from "antd";
import {delUser, getRoles, getUsers, hideUsers, showCreateAdminUser, showCreateUser, showModifyUser, showModifyPwd} from "./actions";
import {tableProps} from "../../lib/ui";
import {getPrincipal} from "../../lib/identity";

class UserList extends PureComponent {
    handleCancel = () => {
        const {dispatch} = this.props;
        dispatch(hideUsers());
    };
    handleShowCreate = () => {
        const {dispatch} = this.props;
        dispatch(showCreateUser());
        dispatch(getRoles());
    };
    handleDeleteUser = (id) => {
        const {dispatch, orgId} = this.props;
        dispatch(delUser(id)).then(action => {
            if (action.error !== true) {
                dispatch(getUsers(orgId));
                notification.success({
                    message: '删除成功'
                });
            } else {
                notification.error({
                    message: '删除失败:' + action.message
                });
            }
        });
    };
    handleShowCreateAdmin = () => {
        const {dispatch} = this.props;
        dispatch(showCreateAdminUser());
    };

    handleUpdate = record =>{
        const {dispatch} = this.props;
        dispatch(showModifyUser(record));
        dispatch(getRoles());
    };
    handleModifyPwd = record =>{
        const {dispatch} = this.props;
        dispatch(showModifyPwd(record));
    };

    render() {

        const {dataSource, visible, loading} = this.props;
        dataSource.forEach(data=>{
            if(data.roleName === '系统管理员'){
                data.roleName = '机构管理员';
            }
        });
        const principal = getPrincipal();
        const columns = [
            {
                title: "员工编号",
                dataIndex: "account",
                width: "150px",
            }, {
                title: "姓名",
                dataIndex: "nickName",
                width: "150px",
            }, {
                title: "邮箱",
                dataIndex: "email",
                width: "200px",
            }, {
                title: "角色",
                dataIndex: "roleName",
                width: "150px",
            }, {
                title: '功能',
                dataIndex: '',
                key: 'x',
                render: (text, record) => <span>
                    <a onClick={() => this.handleUpdate(record)}>编辑</a>
                    <Divider type="vertical"/>
                    <a onClick={() => this.handleModifyPwd(record)}>重置密码</a>
                    <Divider type="vertical"/>
                    <Popconfirm title="确定删除此用户?" okText="是" cancelText="否"
                                onConfirm={() => this.handleDeleteUser(record.id)}>
                        <a>删除</a>
                    </Popconfirm>
                </span>,
            }
        ];
        return (
            <Modal
                title="用户信息"
                visible={visible}
                onCancel={this.handleCancel}
                confirmLoading={loading}
                cancelText="关闭"
                width="70%"
                footer={null}
            >
                <div className="actions">
                    {principal.admin ?
                        <Button onClick={this.handleShowCreateAdmin}><Icon type="plus"/>新增机构管理员</Button> : null}
                    <Button onClick={this.handleShowCreate}><Icon type="plus"/>新增用户</Button>
                </div>
                <Table
                    {...tableProps}
                    columns={columns}
                    dataSource={dataSource}
                    loading={loading}
                />
            </Modal>
        );
    }
}

const mapStateToProps = state => {
    return {
        ...state.organization.users
    };
};

export default connect(mapStateToProps)(UserList);